<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">岗位编号: {{ props.row.number }}</p>
            <p m="t-0 b-2">岗位名称: {{ props.row.departmentName }}</p>
            <p m="t-0 b-2">岗位类型: {{ props.row.type }}</p>
            <h3>成员</h3>
            <el-table :data="props.row.staff">
              <el-table-column label="编号" prop="number" />
              <el-table-column label="姓名" prop="name" />
              <el-table-column label="年龄" prop="age" />
              <el-table-column label="性别" prop="sex" />
              <el-table-column label="电话" prop="phone" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" prop="departmentName" />
      <el-table-column label="操作">
        <el-button size="small" @click="drawer2 = true">修改</el-button>
        <el-button size="small" type="danger" @click="OnClickDeleteBtn">删除</el-button>
      </el-table-column>
    </el-table>
    <el-drawer v-model="drawer2">
      <template #default>
        <h4>部 门 信 息 修 改</h4>
        <div class="content">
          <el-form>
            <el-form-item prop="name">
              <el-input placeholder="岗位名称" type="text" tabindex="4" size="large" />
            </el-form-item>
            <el-form-item prop="type">
              <el-input placeholder="岗位类型" type="text" tabindex="5" size="large" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="OnClickCancelUpdateBtn">取消</el-button>
          <el-button type="primary" @click="OnClickReviceBtn">修改</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox } from "element-plus"
import { ref } from "vue"

const tableData = [
  {
    departmentName: "开发岗位",
    number: "101",
    type: "开发",
    staff: [
      {
        name: "Jerry",
        number: "001",
        age: "34",
        sex: "男",
        phone: "1511552273"
      },
      {
        name: "Jerry",
        number: "001",
        age: "34",
        sex: "男",
        phone: "1511552273"
      },
      {
        name: "Jerry",
        number: "001",
        age: "34",
        sex: "男",
        phone: "1511552273"
      }
    ]
  },
  {
    departmentName: "2016-05-07",
    name: "Tom",
    number: "California",
    age: "San Francisco",
    sex: "3650 21st St, San Francisco",
    phone: "CA 94114",
    staff: [
      {
        name: "Jerry",
        number: "California",
        age: "San Francisco",
        sex: "3650 21st St, San Francisco",
        phone: "CA 94114"
      },
      {
        name: "Spike",
        number: "California",
        age: "San Francisco",
        sex: "3650 21st St, San Francisco",
        phone: "CA 94114"
      },
      {
        name: "Tyke",
        number: "California",
        age: "San Francisco",
        sex: "3650 21st St, San Francisco",
        phone: "CA 94114"
      }
    ]
  }
]
const drawer2 = ref(false)
function OnClickDeleteBtn() {
  ElMessageBox.confirm(`确认删除此岗位?`)
}

function OnClickReviceBtn() {
  ElMessageBox.confirm(`修改成功`)
}
function OnClickCancelUpdateBtn() {
  drawer2.value = false
}
</script>
